<template>
  <el-row class="content" v-if="totalFlash">
    <el-col :span="3" style="height: 100%; background: #3c3c3d">
      <p>监测体列表</p>
      <el-scrollbar style="height: 95%">
        <el-tree
          class="big-font-tree"
          ref="tree"
          :draggable="draggable"
          :accordion="accordion"
          :highlight-current="highlightCurrent"
          :data="tree"
          :props="prop"
          node-key="id"
          :default-expanded-keys="defaultExpandedKeys"
          @node-click="nodeClick"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>
              <i :class="data.icon" :style="{ color: data.color }"></i
              >{{ node.label }}
            </span>
          </span>
        </el-tree>
      </el-scrollbar>
    </el-col>
    <el-col :span="21">
      <component
        :is="currentComponent"
        :node="currentNodeData"
        :current-id="currentId"
        :tree-node="currentNode"
        :leaf-node="currentLeafNode"
        :tree="$refs.tree"
        v-if="flushStatus"
        keep-alive
      ></component>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "TextTree",
  props: {
    tree: {
      type: Array,
      default() {
        return [];
      },
    },
    prop: {
      type: Object,
      default() {
        return {
          children: "children",
          label: "label",
          defaultExpand: "default",
        };
      },
    },
    imports: {
      type: Object,
      default() {
        return {};
      },
    },
    draggable: {
      type: Boolean,
      default: true,
    },
    highlightCurrent: {
      type: Boolean,
      default: true,
    },
    accordion: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      currentNode: null,
      currentId: -1,
      currentComponent: null,
      currentTreeNode: null,
      currentLeafNode: null,
      currentNodeData: null,
      flushStatus: true,
      totalFlash: true,
      defaultExpandedKeys: [Number(sessionStorage.getItem("sensorId")), 1283],
    };
  },
  mounted() {
    if (this.tree) {
      this.expandRoot();
      this.expandDefault();
    }
  },
  methods: {
    expandRoot() {
      if (this.$refs.tree.root.childNodes) {
        this.$refs.tree.root.expanded = true;
        if (
          this.$refs.tree.root.childNodes.length === 1 &&
          this.$refs.tree.root.childNodes[0].data
        )
          this.$refs.tree.root.childNodes.forEach(
            (node) =>
              (node.expanded = node.data[this.prop.defaultExpand] !== false)
          );
      }
    },
    nodeClick(d, node, tree) {
      if (this.currentId !== node.id) {
        if (this.currentNode) this.currentNode.isCurrent = false;
        this.currentNode = node;
        node.isCurrent = true;
        if (!d.children) {
          this.currentId = node.id;
          this.currentLeafNode = node;
          this.currentNodeData = d;
          this.changeComponent(d.component);
          this.$emit("leaf-click", d, node, tree);
        }
        this.$emit("node-click", d, node, tree);
      }
    },
    expandDefault(arr) {
      if (arr) {
        arr.forEach((node) => {
          if (node.data && node.data.default !== undefined) {
            if (node.isLeaf) {
              this.nodeClick(node.data, node, this.$refs.tree);
            } else {
              node.expanded = node.data.default;
            }
          }
          if (this.currentNode === null && node.isLeaf)
            this.nodeClick(node.data, node, this.$refs.tree);
          if (node.childNodes) this.expandDefault(node.childNodes);
        });
      } else if (this.$refs.tree.root.childNodes)
        this.expandDefault(this.$refs.tree.root.childNodes);
    },
    changeComponent(component) {
      if (component) {
        if (this.imports.hasOwnProperty(component)) {
          this.currentComponent = this.imports[component];
        } else {
          this.currentComponent = component;
        }
        this.flushStatus = false;
        this.$nextTick(() => {
          this.flushStatus = true;
        });
        this.$emit("component-change", this.currentComponent);
      } else {
        this.$emit("change-error", component);
      }
    },
  },
  watch: {
    tree() {
      this.expandRoot();
      this.expandDefault();
    },
  },
};
</script>

<style scoped lang="less">
.content {
  height: 100%;
}
p {
  text-align: center;
  line-height: 30px;
  color: white;
}
.el-scrollbar /deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}
.el-tree {
  background-color: transparent;
  color: white;
  /deep/ .el-tree-node__content:hover {
    background: transparent;
  }
  /deep/ .el-tree-node:focus > .el-tree-node__content {
    background: transparent;
  }
  /deep/ .custom-tree-node:hover {
    background-color: rgb(97, 179, 174);
  }
  /deep/ .el-tree-node:focus > .el-tree-node__content .custom-tree-node {
    background-color: rgb(64, 173, 168);
  }
}
/deep/
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background: transparent;
}
/deep/
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content
  .custom-tree-node {
  background: rgba(33, 173, 166, 0.7);
}
</style>
<style>
.big-font-tree .el-tree-node__label {
  font-size: 16px;
}
</style>